<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在组件上使用v-for</title>
    <script src="../../utils/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 注册组件的props的str应该绑定v-for中循环单项item -->
        <!-- 在2.2版本以上，需要使用v-for时，需要有key属性
            任何数据不会自动传递到组件里，因为组件有自己独立的作用域（类似函数？？？）：防止组件与v-for紧密耦合
            为了把迭代数据传进组件里，需在注册组件时定义props 
        -->
        <my-template 
            v-for="item in items" 
            v-bind:str="item" 
            v-bind:key="item.id"
        ></my-template>
    </div>


    <script>
        Vue.component("my-template", {
            props: ["str"],
            template: "<h1>{{ str.msg }}</h1>"
        });
        var app = new Vue({
            el: "#app",
            data: {
                // 对象的属性名若包含特殊字符，需要引号引起来，属性值一定要用引号
                items: [{
                        id: 0,
                        msg: "hello"
                    },
                    {
                        id: 1,
                        msg: "world"
                    },
                    {
                        id: 2,
                        msg: "vue"
                    }
                ]
            }
        });
    </script>
</body>

</html>